import {Button, Modal, Space} from 'acud';
import {OutlinedLeft, OutlinedRight} from 'acud-icon';
import {FC, useCallback, useEffect, useRef, useState} from 'react';
import {map, debounce} from 'lodash';
import classNames from 'classnames';

import './index.less';

export const BASIC_ITEMS = [
    {
        label: '姓名',
        children: '测试多变量xxb',
    },
    {
        label: '学号',
        children: '-',
    },
    {
        label: '座位号',
        children: '-',
    },
];

interface CarouselModalProps {
    visible: boolean;
    currentIndex: number;
    onCancel: () => void;
    setCurrentIndex?: () => void;
    list: any[];
    type?: 'teacher' | 'student';
}

const CLASS_PREFIX = 'carousel-modal';

const CarouselModal: FC<CarouselModalProps> = props => {
    const {visible, list, onCancel, currentIndex, type} = props;
    const scrollContainerRef = useRef<HTMLDivElement>(null);
    const [currentPage, setCurrentPage] = useState(currentIndex);

    const scrollToContainer = useCallback(
        (index: number, isFirst = false) => {
            const scrollContainer = scrollContainerRef.current as any;
            if (scrollContainer) {
                const itemWidth = scrollContainer?.querySelector('.scroll-item')?.offsetWidth as unknown as number;
                scrollContainer.scrollTo({
                    left: itemWidth * index,
                    behavior: isFirst ? 'auto' : 'smooth',
                });
            }
        },
        []
    );

    const handleClick = debounce(
        useCallback(
            type => {
                const newIndex: number = type === 'next' ? currentPage + 1 : currentPage - 1;
                setCurrentPage(newIndex);
                scrollToContainer(newIndex);
            },
            [scrollToContainer, currentPage]
        ),
        300
    );

    useEffect(
        () => {
            if (visible) {
                scrollToContainer(currentIndex, true);
            }
        },
        [visible, currentIndex, scrollToContainer]
    );

    const handlePass = useCallback(
        () => {
        },
        []
    );

    const handleCancel = useCallback(
        () => {
            onCancel();
        },
        [onCancel]
    );

    const renderFooter = () => {
        return (
            <Space>
                {type === 'teacher' && (
                    <Button onClick={handlePass} type="primary">
                        通过
                    </Button>
                )}
                <Button onClick={handleCancel}>返回</Button>
            </Space>
        );
    };

    return (
        <Modal
            visible={visible}
            onCancel={handleCancel}
            width={1280}
            footer={null}
            closable
            className={classNames(`${CLASS_PREFIX}-container`)}
        >
            <div className="scroll-container" ref={scrollContainerRef}>
                <div className="scroll-container-switch">
                    <Button
                        className={classNames('left', {
                            hidden: currentPage === 0,
                        })}
                        onClick={() => handleClick('pre')}
                        icon={<OutlinedLeft />}
                        type="text"
                    />
                    <Button
                        onClick={() => handleClick('next')}
                        className={classNames('right', {
                            hidden: currentPage === list.length - 1,
                        })}
                        icon={<OutlinedRight />}
                        type="text"
                    />
                </div>
                {map(list, (item, index) => (
                    <div className="scroll-item" key={index}>
                        <div className="scroll-container-content">
                            <div className="scroll-container-content-detail">
                                {renderFooter()}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </Modal>
    );
};

export default CarouselModal;
